<template>
    <div class="demo">
        <div class="btns">
            <button @click="directionHandle">更改方向</button>
            <button @click="dataHandle">增加数据</button>
        </div>
        <div class="content">
            <oa-tree ref="treeContainer"
                :initData="treeData"
                :translate="translate"
                :direction="direction">
                <template slot-scope="scope">
                    <div class="base-node member"
                        :key="`node_${scope.data.id}`">
                        <p class="name">
                            {{scope.data.name}}
                        </p>
                        <span class="describe">
                            {{scope.data.attributes.title}}
                        </span>
                    </div>
                </template>
            </oa-tree>
        </div>
    </div>
</template>

<script>
/**
 * @file demo.vue
 * @author lili39@didichuxing.com
 * @date 2018-09-01 12:41:59
 */
import clone from 'clone';
import OaTree from './tree/tree.vue';
const tmpData = [
    {
        name: '线索1',
        attributes: {
            title: '我是线索',
            photo:
                'http://img.hb.aicdn.com/0788a51b27ba8db84f61d95249725475d5396f20119ac-HVge7P_fw658'
        },
        clue: null,
        children: [
            {
                name: '玩法',
                attributes: {
                    title: '我是玩法',
                    photo:
                        'http://img.hb.aicdn.com/0e7c6aee0cc058724c8f40ce28794575d4b1e2a412ed8-E76e7h_fw658'
                }
            },
            {
                name: '玩法',
                attributes: {
                    title: '我是玩法',
                    photo:
                        'http://img.hb.aicdn.com/0e7c6aee0cc058724c8f40ce28794575d4b1e2a412ed8-E76e7h_fw658'
                },
                children: [
                    {
                        name: '玩法',
                        attributes: {
                            title: '我是玩法',
                            photo:
                                'http://img.hb.aicdn.com/0e7c6aee0cc058724c8f40ce28794575d4b1e2a412ed8-E76e7h_fw658'
                        }
                    },
                    {
                        name: '玩法',
                        attributes: {
                            title: '我是玩法',
                            photo:
                                'http://img.hb.aicdn.com/0e7c6aee0cc058724c8f40ce28794575d4b1e2a412ed8-E76e7h_fw658'
                        }
                    }
                ]
            }
        ]
    },
    {
        name: '线索2',
        attributes: {
            title: '我是线索',
            photo:
                'http://img.hb.aicdn.com/0788a51b27ba8db84f61d95249725475d5396f20119ac-HVge7P_fw658'
        },
        clue: null,
        children: [
            {
                name: '玩法',
                attributes: {
                    title: '我是玩法',
                    photo:
                        'http://img.hb.aicdn.com/0e7c6aee0cc058724c8f40ce28794575d4b1e2a412ed8-E76e7h_fw658'
                },
                children: [
                    {
                        name: '玩法',
                        attributes: {
                            title: '我是玩法',
                            photo:
                                'http://img.hb.aicdn.com/0e7c6aee0cc058724c8f40ce28794575d4b1e2a412ed8-E76e7h_fw658'
                        },
                        children: [
                            {
                                name: '玩法',
                                attributes: {
                                    title: '我是玩法',
                                    photo:
                                        'http://img.hb.aicdn.com/0e7c6aee0cc058724c8f40ce28794575d4b1e2a412ed8-E76e7h_fw658'
                                }
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {
        name: '线索3',
        attributes: {
            title: '我是线索',
            photo:
                'http://img.hb.aicdn.com/0788a51b27ba8db84f61d95249725475d5396f20119ac-HVge7P_fw658'
        },
        clue: null,
        children: [
            {
                name: '玩法',
                attributes: {
                    title: '我是玩法',
                    photo:
                        'http://img.hb.aicdn.com/0e7c6aee0cc058724c8f40ce28794575d4b1e2a412ed8-E76e7h_fw658'
                }
            }
        ]
    }
];
export default {
    name: 'demo',
    components: {
        OaTree
    },
    data() {
        return {
            direction: 'vertical',
            translate: {
                x: 0,
                y: 0
            },
            treeData: [
                {
                    name: '根',
                    attributes: {
                        title: '我是线索',
                        photo:
                            'http://img.hb.aicdn.com/0788a51b27ba8db84f61d95249725475d5396f20119ac-HVge7P_fw658'
                    },
                    children: clone(tmpData)
                }
            ]
        };
    },
    methods: {
        pathFunc(linkData, start, end) {
            return 'M' + end.x + ',' + end.y + ' ' + start.x + ',' + start.y;
        },
        setTreeCenter() {
            const isVertical = this.direction === 'vertical';
            const dimensions = this.$refs.treeContainer.$el.getBoundingClientRect();
            this.translate = {
                x: isVertical ? dimensions.width / 2 : 100,
                y: isVertical ? 100 : dimensions.height / 2
            };
        },
        directionHandle() {
            this.direction =
                this.direction === 'horizontal' ? 'vertical' : 'horizontal';
            this.setTreeCenter();
        },
        dataHandle() {
            this.treeData[0].children = this.treeData[0].children.concat(
                clone(tmpData)
            );
        }
    },
    mounted() {
        this.setTreeCenter();
    }
};
</script>

<style lang="less">
.demo {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .btns {
        height: 25px;
        text-align: center;
        padding: 5px;
        box-sizing: border-box;
    }
    .content {
        flex: 1;
        border: 1px dashed #999;
        margin: 10px;
    }
}
.base-node {
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    font-size: 13px;
    font-weight: 300;
    font-family: microsoft yahei;
    background: #fff;
    border: 1px solid #d8dce5;
    border-radius: 3px;
    cursor: pointer;
    &:hover {
        cursor: default;
    }
}
.member {
    display: flex;
    width: 160px;
    height: 80px;
    .name {
        width: 60px;
        height: 60px;
        overflow: hidden;
        border: 1px solid #ddd;
        margin-right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .describe {
        flex: 1;
        .name {
            margin-bottom: 5px;
            color: #333;
            font-size: 16px;
        }
        .title {
            color: #999;
        }
    }
}
</style>
